<template>
  <view v-if="!isLoading">
    <view class="header">
      <xy-title title="个人中心" :show-back="false"></xy-title>
      <view class="icons">
        <view class="yz-iconfont yz-erweima1" style="margin-right: 20rpx;" @tap="showShareCode"></view>
        <view class="yz-iconfont yz-xitong" @tap="$xyfun.to('/pages/user/info')"></view>
      </view>
      <view style="clear: both;"></view>
    </view>

    <view class="container">
      <view class="header-next">
        <view class="crown">
          <image mode="widthFix" :src="$xyfun.image('/static/kaka/personcenter/crown.png')"></image>
        </view>
        <view class="header-user" @tap="$xyfun.to('/pages/user/info')" v-if="user.isLogin">
          <image class="avatar" :src="userinfo.avatar"></image>
          <view class="user-info">
            <view class="flex m-t-20">
              <text class="username">{{ userinfo.nickname }}</text>
              <view class="userlevel" :style="'background-image:url('+ $xyfun.image('/static/kaka/personcenter/user_level.png')+');'">{{userinfo.level_name}}</view>
            </view>
            <view class="ts-24 tc-999 m-t-20">当前折扣比例：{{userinfo.level_discount}}</view>
          </view>
        </view>
        <view class="header-user" v-else @click="$xyfun.to('/pages/user/login')">
          <image class="avatar" :src="common.appConfig.useravatar"></image>
          <view class="user-info">
            <text class="username">请先登录</text>
          </view>
        </view>
        <view class="levelup" @click="$xyfun.to('/pages/user/level')" v-if="user.isLogin">
          <view class="ts-20 tc-999">累计获得{{userinfo.xykeep_consume}}成长值，还需{{userinfo.next_need}}成长值</view>
          <view class="upgrade">立即升级</view>
        </view>
      </view>
      <!-- 用户详情页结束 -->

      <view class="balance" :style="'background-image:url('+ $xyfun.image('/static/background4.png')+');'" v-if="user.isLogin">
        <view class="m-l-20" v-if="user.isLogin" @click="$xyfun.to('/pages/user/balance')">
          <view class="tc-333">账户余额（元）</view>
          <view class="ts-42 tm3 m-t-20">{{ user.info.money || 0.00 }}</view>
        </view>
        <view class="recharge">
          <view @click="$xyfun.to('/pages/user/recharge')">充值</view>
        </view>
      </view>

      <!-- 我的订单开始 -->
      <view class="card">
        <view class="card-tit">我的订单
          <view class="all" @tap="$xyfun.to('/pages/user/shop/order?status=all')">
            全部<text class="yz-iconfont yz-jiantou"></text>
          </view>
        </view>
        <view class="order">
          <view class="item" @tap="$xyfun.to('/pages/user/shop/order?status=0')">
            <image :src=" $xyfun.image('/static/kaka/personcenter/payment.png')"></image>
            <view>待付款</view>
          </view>
          <view class="item" @tap="$xyfun.to('/pages/user/shop/order?status=1')">
            <image :src=" $xyfun.image('/static/kaka/personcenter/wallet.png')"></image>
            <view>已付款</view>
          </view>
          <view class="item" @tap="$xyfun.to('/pages/user/shop/order?status=2')">
            <image :src=" $xyfun.image('/static/kaka/personcenter/receipt.png')"></image>
            <view>待收货</view>
          </view>
          <view class="item" @tap="$xyfun.to('/pages/user/shop/order?status=3')">
            <image :src=" $xyfun.image('/static/kaka/personcenter/over.png')"></image>
            <view>已完成</view>
          </view>
          <view class="item" @tap="$xyfun.to('/pages/user/shop/order?status=4')">
            <image :src=" $xyfun.image('/static/kaka/personcenter/refund.png')"></image>
            <view>我的退款</view>
          </view>
        </view>
      </view>
      <!-- 我的订单结束 -->

      <!-- 常用开始 -->
      <view class="card">
        <view class="card-tit">常用工具</view>
        <view class="order p-lr-40 m-t-0 p-b-20">
          <view class="item tool" @tap="$xyfun.to('/pages/user/address/list')">
            <image :src=" $xyfun.image('/static/kaka/personcenter/address.png')"></image>
            <view>我的地址</view>
          </view>
          <view class="item tool" @tap="$xyfun.to('/pages/user/foot')">
            <image :src=" $xyfun.image('/static/kaka/personcenter/foot.png')"></image>
            <view>浏览足迹</view>
          </view>
          <view class="item tool" @tap="$xyfun.to('/pages/user/favorite')">
            <image :src=" $xyfun.image('/static/kaka/personcenter/collection.png')"></image>
            <view>我的收藏</view>
          </view>
          <button open-type="contact" class="item tool">
            <image :src=" $xyfun.image('/static/kaka/personcenter/service.png')"></image>
            <view>客户服务</view>
          </button>
        </view>
      </view>
      <!-- 常用结束 -->

      <!-- 我的店铺开始 -->
      <view class="card" v-if="userinfo.store_id">
        <view class="card-tit">我的店铺</view>
        <view class="order p-t-20">
          <view class="item shop" @click="$xyfun.to('/pages/store/order')">
            <image :src=" $xyfun.image('/static/kaka/personcenter/1.png')"></image>
            <view>订单管理</view>
          </view>
          <view class="item shop" @click="$xyfun.to('/pages/store/index?id='+userinfo.store_id)">
            <image :src=" $xyfun.image('/static/kaka/personcenter/2.png')"></image>
            <view>查看店铺</view>
          </view>
          <view class="item shop" @tap="showShareCode">
            <image :src=" $xyfun.image('/static/kaka/personcenter/3.png')"></image>
            <view>分享码</view>
          </view>
          <view class="item shop" @click="$xyfun.to('/pages/store/money')">
            <image :src=" $xyfun.image('/static/kaka/personcenter/4.png')"></image>
            <view>我的钱包</view>
          </view>
          <view class="item shop" @click="showStoreManage=true">
            <image :src=" $xyfun.image('/static/kaka/personcenter/5.png')"></image>
            <view class="shop-item">我的后台</view>
          </view>
        </view>
      </view>
    </view>


    <view class="xy-modal-box xy-modal-show store_manage-modal" v-if="showStoreManage">
      <view class="yz-iconfont yz-guanbi" @tap="showStoreManage = false"></view>
      <view class="store_manage" >
        <view class="line">
          <text class="tb">店铺名称：</text>
          <text>{{userinfo.store.name}}</text>
        </view>
        <view class="line" @click.stop="$xyfun.copy(userinfo.store.link)">
          <text class="tb">链接：</text>
          <text>{{userinfo.store.link}}</text>
          <text class="m-l-20 tm2 ts-32 yz-iconfont yz-fuzhi-L"></text>
        </view>
        <view class="line" @click.stop="$xyfun.copy(userinfo.store.phone)">
          <text class="tb">店铺账号：</text>
          <text>{{userinfo.store.phone}}</text>
          <text class="m-l-20 tm2 ts-32 yz-iconfont yz-fuzhi-L"></text>
        </view>
        <view class="line" @click.stop="$xyfun.copy(userinfo.store.password)">
          <text class="tb">店铺密码：</text>
          <text>{{userinfo.store.password}}</text>
          <text class="m-l-20 tm2 ts-32 yz-iconfont yz-fuzhi-L"></text>
        </view>
      </view>
    </view>
    <view class="xy-modal-mask" :class="[showStoreManage?'xy-mask-show':'']" @tap="showStoreManage =!showStoreManage"></view>

    <!--分享组件 -->
    <xy-share ref="xyShare" v-model="showShare" posterType="user" />

    <!-- 我的店铺结束 -->
    <xy-tabbar />
 </view>
</template>

<script>
import { mapState,mapActions } from 'vuex';

import XyTabbar from "@/components/xy-tabbar/index.vue";
import xyUserCard from '@/components/xy-user/card';
import xyEmpty from '@/components/xy-empty';
import xyShare from "@/components/xy-share/index.vue";
import xyTitle from "@/components/xy-title/index.vue";
export default {
  components: {
    xyTitle,
    xyShare,
    XyTabbar,
    xyUserCard,
    xyEmpty},
  data() {
    return {
      showShare:false,
      showStoreManage: false,
      userinfo : {},
      isLoading:true,
      isEmpty: true,
      logList: [],
      currentPage: 1,
      lastPage: 1,
      loadStatus: 'loadmore',
    };
  },
  computed: {
    ...mapState(['common','user'])
  },
  async onLoad() {
    if(this.user.isLogin){
      this.loadData();
    }else{
      this.isLoading = false;
    }
  },
  onShow() {
    if(this.user.isLogin){
      this.loadData();
    }

  },
  onShareAppMessage() {
    return {
      title: '自定义分享标题',
      path: '/pages/index?store_id=2', // 自定义分享路径
      imageUrl: this.common.shareConfig.image, // 分享图片
      success(res) {
        console.log('分享成功', res);
      },
      fail(err) {
        console.log('分享失败', err);
      }
    }
  },
  methods: {
    ...mapActions('user',{'getUserInfo':'getInfo'}),
    loadData() {
      this.$api.get({
        url: '/user/user_center',
        data: {},
        success: res => {
          this.userinfo = res;
          this.isLoading = false;
        }
      })
    },
    //分享好友
    showShareCode(){
      this.showShare = true;
    }
  }
}
</script>

<style lang="scss">
.linear-bg{
  position: relative !important;
}
.container {
  width: 100%;
  padding: 30rpx 30rpx 0 30rpx;
  background-color: rgb(248, 242, 242);
  align-content: center;
}

.header {
  width: 100%;
  background: #efc9c0;
  overflow: hidden;
  padding-bottom: 40rpx;
  .icons{
    margin-top: 40rpx;
    float: right;
    display: flex;
    font-size: 44rpx;
    color: #808080;
    margin-right: 30rpx;
  }
}


/* 用户卡片 */
.header-next {
  margin-top: 70rpx;
  background: linear-gradient(to right top,#fff,#fff,$theme1);
  width:  100%;
  height: 300rpx;
  padding: 20rpx;
  border: 4rpx solid $theme1;
  border-radius: 20rpx;
  position: relative;
  .crown{
    position: absolute;
    top: -80rpx;
    right: 40rpx;
    width: 140rpx;
    image{
      width: 100%;
    }
  }

  .header-user {
    display: flex;
    align-items: center;
    .avatar {
      width: 140rpx;
      height: 140rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    .userlevel{
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 140rpx;
      height: 40rpx;
      padding-left: 40rpx;
    }
  }

  .levelup {
    display: flex;
    justify-content: space-between;
    margin-top: 50rpx;
    .upgrade {
      width: 140rpx;
      text-align: center;
      background-color: #f2ce55;
      color: #000;
      padding: 10rpx 20rpx;
      border-radius: 40rpx;
      font-size: 24rpx;
    }
  }
}


/* 账户开始 */
.balance {
  width: 100%;
  height: 200rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-size:100% 100%;
  padding: 20rpx;
  margin-top: 20rpx;
  border-bottom: 2rpx solid #ddd;
  .recharge {
    view {
      background: linear-gradient(to right,#5fb9e7,#a0d7f4);
      width: 140rpx;
      color: #fff;
      border-radius: 40rpx;
      line-height: 60rpx;
      text-align: center;
    }
  }
}


/* 订单开始 */
.card {
  width: 100%;
  margin-top: 20rpx;
  background-color: rgb(255, 255, 255);
  padding: 20rpx;
  border-bottom: 2rpx solid #ddd;
  .card-tit{
    font-size: 26rpx;
    font-weight: bold;
  }
  .all{
    float: right;
    color: #a8a8a8;
    font-weight: normal;
    display: flex;
    align-items: center;
    font-size: 26rpx;
    .yz-iconfont{
      border-radius: 50%;
      border: 1rpx solid #999;
      color: #999;
      font-size: 20rpx;
      margin-left: 10rpx;
    }
  }
}

.order {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .item {
    margin: 40rpx 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20%;
    image {
      height: 100rpx;
      width: 100rpx;
    }
    view {
      white-space: nowrap;
      font-size: 22rpx;
      line-height: 25rpx;
      margin-top: 10rpx;
    }
  }
}


/* 工具开始 */
.tool {
  image {
    height: 50rpx !important;
    width: 50rpx !important;
  }
}

/* 店铺开始 */
.shop {
  image {
    height: 90rpx !important;
    width: 90rpx !important;
    margin-bottom: 10rpx;
  }
}

.store_manage-modal{
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 35vh;
  width: 720rpx;
  border-radius: 20rpx;
  .yz-guanbi{
    position: absolute;
    right: -20rpx;
    top: -20rpx;
    color: $theme2;
    background: #fff;
    border-radius: 50%;
    font-size: 50rpx;
  }
  .store_manage{
    width: 720rpx;
    padding: 50rpx 0;
    font-size: 32rpx;
    .line{
      margin: 50rpx;
    }
  }
}

</style>
